<template>
  <view v-if="!popUpWinShow" class="x-modal x-flex-column-center" @tap.stop="cancel">
    <view class="middleContent x-flex-column-between">
      <view class="title x-flex-row-center">{{contractObj.title}}</view>
      <!-- <scroll-view class="cont" scroll-y>
        <slot></slot>
      </scroll-view> -->
      <view class="cont">
        <view class="red-box">
          举报<text class="red">{{jubaoObj.author_name}}</text>用户的帖子
        </view>

        <view class="text-title">
          @{{jubaoObj.author_name}}：{{jubaoObj.label}}
        </view>
        <view class="content-box">
          {{jubaoObj.main_content}}
        </view>
        <view class="text-title">
          请选择你要投诉的类型*
        </view>
        <view class="value-box">
          <view class="lable" v-for="(item,index) in industryList" :key="index" :class="item.isFlag?'activeted':''" @click.stop="setindustry(item)">
            {{item.lable}}
          </view>
        </view>

      </view>
      <view class="text-title">
        请填写你举报的理由
      </view>
      <view class="report-content" @click.stop="">
        <u-input :auto-height="false" maxlength="100" height="120" class="textarea" placeholder="请输入描述内容" type="textarea" v-model="form.complaint_content" clearable></u-input>
      </view>

      <view class="foot x-flex-row-between-center">
        <view class="oneconfirm" @tap.stop="confirm" :class="checkList.length!=0?'opacity1':''">{{contractObj.confirmText}}</view>
      </view>
    </view>
  </view>

</template>

<script>
import api from '@/api/index.js'
export default {
  props: ['popUpWinShow', 'jubaoObj'],
  data() {
    return {
      form: {
        complaint_type: '',
        complaint_content: ''
      },
      contractObj: {
        title: '请选择举报类型',
        content: '',
        isShow: true,
        showBotton: false,
        cancelText: '取消',
        confirmText: '提交',
        showOneBotton: true
      },
      industryList: [
        // { lable: '全部', id: '1', isFlag: true },
        { lable: '涉黄信息', id: '2', isFlag: false },
        { lable: '有害信息', id: '3', isFlag: false },
        { lable: '网络暴力', id: '4', isFlag: false },
        { lable: '违规营销', id: '5', isFlag: false },
        { lable: '违法信息', id: '6', isFlag: false },
        { lable: '人身攻击', id: '7', isFlag: false },
        { lable: '不实信息', id: '2', isFlag: false },
        { lable: '不良价值导向', id: '3', isFlag: false },
        { lable: '涉及未成年人', id: '4', isFlag: false },
        { lable: '侵犯个人权益', id: '5', isFlag: false },
      ],

      checkList: [],
      isCanRequest: true
    };
  },
  created() {
    this.checkList = []
    this.form = {
      complaint_type: '',
      complaint_content: ''
    }
  },
  mounted() {
    this.checkList = []
    this.form = {
      complaint_type: '',
      complaint_content: ''
    }
  },
  methods: {
    setIsRequestFlag() {
      if (this.isCanRequest) {
        this.isCanRequest = false
        setTimeout(() => {
          this.isCanRequest = true
        }, 5000)
        return true
      } else {
        return false
      }
    },
    cancel(e) {
      this.$emit('showJubao', false);
    },

    confirm(e) {
      this.getTrendsComplaint()
    },

    setindustry(item) {
      item.isFlag = !item.isFlag
      this.checkList = []
      for (let i = 0; i < this.industryList.length; i++) {
        if (this.industryList[i].isFlag == true) {
          this.checkList.push(this.industryList[i].lable)
        }
      }

      this.form.complaint_type = this.checkList.join(',')
      // if (item.id == 1) {
      //   for (let i = 0; i < this.industryList.length; i++) {
      //     this.industryList[i].isFlag = item.isFlag
      //   }
      // } else {
      //   for (let i = 0; i < this.industryList.length; i++) {
      //     if (this.industryList.id != 1 && this.industryList[i].isFlag == false) {
      //       this.industryList[0].isFlag = false
      //     }
      //   }
    },
    //删帖
    getTrendsComplaint() {
      let flag = this.setIsRequestFlag()
      if (!flag) {
        console.log('不让请求')
        return
      } else {
        api.base.getTrendsComplaint({ ...this.form, ...this.jubaoObj }).then(res => {
          if (res.code == 1) {
            this.$emit('showJubao', false);
            uni.$u.toast("举报成功")
          } else {
            uni.showToast({
              title: res.msg,
              icon: 'none'
            });
          }
        });
      }

    },
  },


};
</script>

<style lang="scss" scoped>
.x-modal {
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  width: 100vw;
  background-color: rgba(0, 0, 0, 0.4);
  z-index: 9999;

  .middleContent {
    width: 100vw;
    width: 660rpx;
    background: #ffffff;
    border-radius: 16rpx;
    padding-bottom: 32rpx;
    .title {
      font-size: 32rpx;
      font-family: PingFang SC-Medium, PingFang SC;
      font-weight: 500;
      color: #333333;
      line-height: 38rpx;
      padding: 32rpx;
      word-spacing: 1rpx;
    }
    .cont {
      width: 100%;
      .red-box {
        height: 72rpx;
        line-height: 72rpx;
        padding-left: 24rpx;
        background: rgba(255, 37, 68, 0.1);
        .red {
          color: #ff2544;
        }
      }
      .text-title {
        // height: 40rpx;
        font-size: 28rpx;
        font-family: PingFang SC-Medium, PingFang SC;
        font-weight: 500;
        color: #333333;
        line-height: 40rpx;
        margin: 24rpx;
      }
      .content-box {
        margin: 24rpx 24rpx 48rpx 24rpx;
        font-size: 24rpx;
        font-family: PingFang SC-Medium, PingFang SC;
        font-weight: 500;
        color: #999999;
        line-height: 28rpx;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
      }
      .value-box {
        width: calc(100% - 24rpx);
        margin: 12rpx;
        .lable {
          width: 197rpx;
          height: 66rpx;
          font-size: 24rpx;
          background: #f5f5f5;
          border-radius: 12rpx 12rpx 12rpx 12rpx;
          float: left;
          display: flex;
          justify-content: center;
          align-items: center;
          margin: 7rpx;
          margin-top: 10rpx;
          color: #666666;
        }
        .activeted {
          color: #6d0cf7;
          border: 2rpx solid #6d0cf7;
        }
      }
    }
    .text-title {
      // height: 40rpx;
      font-size: 28rpx;
      font-family: PingFang SC-Medium, PingFang SC;
      font-weight: 500;
      color: #333333;
      line-height: 40rpx;
      margin: 24rpx;
    }
    .report-content {
      margin: 0rpx 24rpx 24rpx 24rpx;
      width: calc(100% - 48rpx);
      height: 280rpx;
      background: #f5f5f5;
      border-radius: 12rpx 12rpx 12rpx 12rpx;

      ::v-deep.uni-textarea-textarea {
        padding-left: 15rpx;
        padding-right: 15rpx;
        font-size: 24rpx;
        font-family: PingFang SC-Medium, PingFang SC;
        font-weight: 500;
        color: #999999;
      }
      ::v-deep.uni-textarea-placeholder {
        padding-left: 15rpx;
        padding-right: 15rpx;
        font-size: 24rpx;
      }
    }

    .foot {
      padding-top: 48rpx;
      .cancel,
      .confirm {
        width: 268rpx;
        height: 72rpx;
        background: #6d0cf7;
        border-radius: 104rpx 104rpx 104rpx 104rpx;
        text-align: center;
        line-height: 72rpx;
        font-weight: 500;
      }

      .cancel {
        background: rgba(0, 82, 217, 0.12);
        color: #6d0cf7;
      }

      .confirm {
        background: #6d0cf7;
        color: #ffffff;
        opacity: 0.5;
      }
      .oneconfirm {
        margin-left: 32rpx;
        margin-right: 32rpx;
        width: calc(100% - 64rpx);
        height: 72rpx;
        background: #6d0cf7;
        border-radius: 24rpx 24rpx 24rpx 24rpx;
        // opacity: 0.5;
        text-align: center;
        line-height: 72rpx;
        font-weight: 500;
        color: #ffffff;
        opacity: 0.5;
      }
    }
  }
}
.opacity1 {
  opacity: 1 !important;
}
</style>